<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form ref="listQuery" :model="listQuery" inline>
                <el-form-item label="进厂批次" prop="enterBatchCode">
                    <el-select size="small" class="filter-item" style="width: 150px" v-model="listQuery.enterBatchCode" placeholder="请选择进厂批次" @change="getHospitalByHospitalOrder">
                        <el-option v-for="item in batchCodeOptions" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <!--<el-form-item label="进厂批次" prop="enterBatchCode">-->
                    <!--<el-input size="small" clearable @blur="getHospitalByHospitalOrder" style="width: 150px;" class="filter-item" placeholder="请输入进厂批次" v-model="listQuery.enterBatchCode">-->
                    <!--</el-input>-->
                <!--</el-form-item>-->
                <el-form-item label="所属医院" prop="hid">
                    <el-select size="small" clearable class="filter-item" style="width: 150px" v-model="listQuery.hid" placeholder="请选择所属医院">
                        <el-option v-for="item in hospitalOptions" :key="item.name" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="打捆时间" prop="balingTime">
                    <el-date-picker size="small" clearable style="width: 160px;" placeholder="请选择打捆时间" v-model="listQuery.balingTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%" stripe>
            <el-table-column align="center" width="60px" type="index" label="序号"></el-table-column>
            <el-table-column align="center" label="打捆时间" prop="createTime"></el-table-column>
            <el-table-column align="center" label="打捆编号" prop="balingCode"></el-table-column>
            <el-table-column align="center" label="进厂批次" prop="enterBatchCode"></el-table-column>
            <el-table-column align="center" label="品类" prop="typeName"></el-table-column>
            <el-table-column align="center" label="数量" prop="clothesCnt"></el-table-column>
        </el-table>

        <div class="pd1020" style="border-bottom: 1px solid #ddd;font-size:18px;margin-bottom: 20px;margin-top: 20px;">打包合计</div>
        <el-row class="split_row">
            <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 12}" :xl="{span: 12}">
                <div>工作服总数：{{gongTotal}}<span style="width: 20px;display: inline-block"></span>传染服总数：{{chuanTotal}}</div>
                <div>布草总数：{{buTotal}}<span style="width: 20px;display: inline-block"></span>手术服总数：{{shouTotal}}</div>
            </el-col>
        </el-row>
        <el-row class="split_row">
            <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 12}" :xl="{span: 12}">
                <div class="editNum">
                    <span style="float: left;">洁袋数量：</span>
                    <a @click="minNum"><svg-icon icon-class="minus" /></a>
                    <el-input size="small" style="width:90px" placeholder="请输入洁袋数量" v-model="bagAmount" />
                    <a @click="addNum"><svg-icon icon-class="plus" /></a>
                </div>
            </el-col>
            <el-col :xs="{span: 12}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 12}" :xl="{span: 12}">
                <el-button class="filter-item" type="primary" icon="el-icon" @click="confirm">确定下单</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { parseTime } from '@/utils'
  import { factoryBatchPrepareCreate, factoryBatchCreate } from '@/api/factory'
  import { fetchHospitalList, fetchHospitalBatchOrder, hospitalBatchOrderRecentList } from '@/api/hospital'

  export default {
    name: 'OrderOut',
    data() {
      return {
        tableKey: 0,
        list: [],
        listLoading: false,
        listQuery: {
          hid: '',
          enterBatchCode: '',
          balingTime: ''
        },
        hospitalOptions: [],
        batchCodeOptions: [],
        bagAmount: 0,
        buTotal: 0,
        gongTotal: 0,
        chuanTotal: 0,
        shouTotal: 0
      }
    },
    watch: {
      list(val) {
        this.buTotal = 0
        this.gongTotal = 0
        this.shouTotal = 0
        this.chuanTotal = 0
        val.forEach((item, index) => {
          if (item.categoryType === '1') {
            this.buTotal += (parseInt(item.clothesCnt) || 0)
          }
          if (item.categoryType === '2') {
            this.gongTotal += (parseInt(item.clothesCnt) || 0)
          }
          if (item.categoryType === '3') {
            this.shouTotal += (parseInt(item.clothesCnt) || 0)
          }
          if (item.categoryType === '4') {
            this.chuanTotal += (parseInt(item.clothesCnt) || 0)
          }
        })
      }
    },
    computed: {
      ...mapGetters([
        'fid'
      ])
    },
    created: function() {
      this.listQuery.balingTime = parseTime(new Date(), '{y}-{m}-{d}')
      this.getHospital()
      this.getBatchCode()
    },
    filters: {
      parseTime
    },
    methods: {
      getBatchCode() {
        hospitalBatchOrderRecentList({ page: 1, size: 50 }).then(response => {
          this.batchCodeOptions = response.data || []
        })
      },
      getHospital() {
        fetchHospitalList({ page: 1, size: 500, fid: this.fid }).then(response => {
          this.hospitalOptions = response.data && response.data.list || []
        })
      },
      getList() {
        this.listLoading = true
        const balingTime = this.listQuery.balingTime || parseTime(new Date(), '{y}-{m}-{d}')
        factoryBatchPrepareCreate(this.listQuery.enterBatchCode, balingTime).then(response => {
          this.list = response.data.list || []
          this.listLoading = false
        }).catch(e => {
          this.listLoading = false
        })
      },
      handleFilter() {
        if (!this.listQuery.enterBatchCode) {
          this.$message({ message: '请先输入进厂批次', type: 'error', showClose: true })
          return
        }
        // if (!this.listQuery.balingTime) {
        //   this.$message({ message: '请先选择打捆时间', type: 'error', showClose: true })
        //   return
        // }
        this.getList()
      },
      getHospitalByHospitalOrder() {
        if (!this.listQuery.enterBatchCode) return
        fetchHospitalBatchOrder({ code: this.listQuery.enterBatchCode }).then(response => {
          this.listQuery.hid = response.data && response.data.hid || ''
        })
      },
      addNum() {
        this.bagAmount++
      },
      minNum() {
        if (this.bagAmount <= 1) {
          this.$message({ message: '不能再减少了~', type: 'error', showClose: true })
          return
        }
        this.bagAmount--
      },
      confirm() {
        if (!this.listQuery.enterBatchCode) {
          this.$message({ message: '请先输入进厂批次', type: 'error', showClose: true })
          return
        }
        if (!this.bagAmount || !/^\d+$/.test(this.bagAmount)) {
          this.$message({ message: '请输入洁袋数量', type: 'error', showClose: true })
          return
        }
        if (!this.listQuery.balingTime) {
          this.$message({ message: '请先选择打捆时间', type: 'error', showClose: true })
          return
        }
        factoryBatchCreate(this.listQuery.enterBatchCode, this.bagAmount, this.listQuery.balingTime).then(response => {
          if (response.code === '0' || response.code === 0) {
            this.$message({ message: '下单成功', type: 'success', showClose: true })
            this.list = []
            this.bagAmount = 0
            this.listQuery.enterBatchCode = ''
          }
        })
      }
    }
  }
</script>

<style scoped>
    .el-range-editor.el-input__inner {
        width: 273px;
        padding: 3px;
    }
    .pd1020 {
        padding: 10px 20px;
    }
    .editNum div, .editNum a{
        float: left;
        text-align: center;
    }
    a.editNum, .editNum a {
        font-size: 25px;
        line-height: 32px;
    }
    .split_row {
        height: 80px;
    }
    .split_row div {
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
    }
</style>
